<!-- 265 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary"
                :loading="searchBtnLoading"
                @click="getDataList('search')">{{
        $t("common_query")
      }}</a-button>
    </a-space>
    <t-query-form layout="inline"
                  ref="queryForm"
                  group="ViewShippedBoxPalletInformation"
                  :model="queryForm">
      <a-row :gutter="[16, 0]">
        <a-col :span="6">
          <a-form-item :label="$t('T9_productType')"
                       name="productType"
                       prop="productType">
            <a-select v-model:value="queryForm.productType"
                      class="select-width"
                      @change="changeProductType" show-search allow-clear>
              <a-select-option v-for="item in productTypeArr"
                               :key="item.enumValue"
                               :value="item.enumValue">
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')"
                       name="productId"
                       prop="productId">
            <a-select v-model:value="queryForm.productId"
                      class="select-width" show-search allow-clear>
              <a-select-option v-for="item in productIdArr"
                               :key="item.productId"
                               :value="item.productId">
                {{ item.productId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item :label="$t('t9_date')"
                       name="date">
            <a-range-picker :show-time="{ format: 'HH:mm:ss' }"
                            :default-value="queryForm.Date"
                            format="YYYY-MM-DD HH:mm:ss"
                            @change="onChange" />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_shipUnShip')"
                       name="shipUnShip"
                       prop="shipUnShip">
            <a-select v-model:value="queryForm.shipUnShip"
                      class="select-width"
                      @change="changeShopId" show-search allow-clear>
              <a-select-option v-for="item in shipUnShipArr"
                               :key="item"
                               :value="item">
                {{ item }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_Owner')"
                       name="owner"
                       prop="owner">
            <a-select v-model:value="queryForm.owner"
                      class="select-width"
                      @change="changeShopId" show-search allow-clear>
              <a-select-option v-for="item in ownerArr"
                       :key="item.enumValue" :value="item.enumValue">
              {{item.enumValue}}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <t-query-form layout="inline"
      ref="dataForm"
      :model="dataForm"
      >
        <a-row
        :gutter="[16, 0]"
      >
       <a-col :span="6">
          <a-form-item :label="$t('T9_sumBoxQty')" name="sumBoxQty" prop="sumBoxQty">
            <a-input v-model:value="dataForm.sumBoxQty" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_sumPanelQty')" name="sumPanelQty" prop="sumPanelQty">
            <a-input v-model:value="dataForm.sumPanelQty" disabled />
          </a-form-item>
        </a-col>
        </a-row>
      </t-query-form>
    <a-row type="flex"
           justify="space-between"
           align="middle"
           class="global-oper-row mt-2">
      <a-col :span="15"
             class="global-oper-row-title">{{
        $t("T9_palletBoxList")
      }}</a-col>
      <a-col :span="6"
             class="global-oper-row-extra">
        <a-button  @click="getDataList('export')">{{ $t("t9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="tableArea">
    <t-table :data="table.data" max-height="100%">
      <t-column field="productId"
                :title="$t('T9_productId')" />
      <t-column field="owner"
                :title="$t('T9_owner')" />
      <t-column field="palletId"
                :title="$t('T9_palletId')" />
      <t-column field="panelQty"
                :title="$t('T9_panelQty')" />
      <t-column field="cstGrade"
                :title="$t('T9_cstGrade')" />
      <t-column field="boxQty"
                :title="$t('T9_boxQty')" />
      <t-column field="capacity"
                :title="$t('T9_capacity')" />
      <t-column field="route"
                :title="$t('T9_route')" />
      <t-column field="oeration"
                :title="$t('T9_oeration')" />
      <t-column field="shippingNumber"
                :title="$t('T9_shippingNumber')" />
      <t-column field="destinationShopId"
                :title="$t('T9_destinationShopId')" />
      <t-column field="engineerNumber"
                :title="$t('T9_engineerNumber')" />
      <t-column field="engineerName"
                :title="$t('T9_engineerName')" />
      <t-column field="eventTime"
                :title="$t('T9_eventTime')" />
      <t-column field="eventUser"
                :title="$t('T9_eventUser')" />
      <t-column field="eventName"
                :title="$t('T9_eventName')" />
      <t-column field="eventComment"
                :title="$t('T9_eventComment')" />
      <t-column field="receiveFlag"
                :title="$t('T9_receiveFlag')" />
    </t-table>
    </div>

  </div>
</template>
<script>
  import { defineComponent } from 'vue'
  import moment from 'moment'
  import { getProductType, getList, getOwnerId } from '@/api/common'
  import { getProductId } from '@/api/viewShippedBoxPalletInformation'
  import { getCurrentDate } from '@/utils/utils'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'ViewShippedBoxPalletInformation',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          list: []
        },
        shipUnShipArr: [
          'Actual Ship',
          'Ship',
          'PalletUnShip',
          'CellReceivedShipBackChangedPallet',
          'CrossShip',
          'Return',
          'CrossOutShip'
        ],
        productIdArr: [],
        productTypeArr: [],
        ownerArr: [],
        queryForm: {
          productType: '',
          productId: '',
          Date: [],
          shipUnShip: 'Actual Ship',
          owner: ''
        },
        dataForm: {
          sumBoxQty: '',
          sumPanelQty: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductType()
      this.getOwner()
      this.queryForm.Date = [
        moment(getCurrentDate(), 'YYYY-MM-DD HH:mm'),
        moment(getCurrentDate(1), 'YYYY-MM-DD HH:mm')
      ]
    },
    methods: {
      onChange(value) {
        this.queryForm.Date = value
      },
      getDataList(type) {
        const obj = {
          dtoName: 'ViewShippedBoxPalletListDTO',
          startTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[0].format('YYYYMMDDHHmmss') : null,
          endTime: this.queryForm.Date.length !== 0 ? this.queryForm.Date[1].format('YYYYMMDDHHmmss') : null,
          processGroupType: 'Pallet',
          processState: '',
          productId: this.queryForm.productId,
          queryId: 'GetProcessGroupList',
          shipUnShip: this.queryForm.shipUnShip,
          shopId: 'CELL',
          version: '',
          menuName: 'viewShippedBoxPalletInformation',
          usage: 'queryViewShippedBoxPalletList'
        }
        if (this.queryForm.shipUnShip === 'return') {
          obj.version = '80031'
        } else if (this.queryForm.shipUnShip === 'CrossOutShip') {
          obj.version = '8038'
        } else {
          obj.version = '8030'
        }
        if (type === 'search') {
          obj.export = false
          getList(obj).then(res => {
            this.table = res.viewShippedBoxPalletListDTOList
            this.dataForm.sumBoxQty = res.sumBoxQty
            this.dataForm.sumPanelQty = res.sumPanelQty
          })
        } else {
          obj.export = true
          getList(obj).then(res => {
            downloadBlobFile(res, 'palletBoxList')
          })
        }
      },
      getProductType() {
        getProductType().then(res => {
          this.productTypeArr = res
        })
      },
      changeProductType() {
        const params = {
          shopId: 'CELL'
        }
        getProductId(params).then((res) => {
          this.productIdArr = res
        })
      },
      getOwner() {
        const params = {
          ownerType: 'OwnerD',
          shopId: 'CELL'
        }
        getOwnerId(params).then((res) => {
          this.ownerArr = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row, .ant-row:after, .ant-row:before {
    display: flex;
    flex: 1;
}
.tableArea{
  width:100%;
  height: 50vh;
}
</style>
